<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>线下会员登录</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
		<link rel="stylesheet" href="../css/mint-ui.css" />
		<link rel="stylesheet" href="../css/animate.css" />
		<link rel="stylesheet" href="../css/main.css" />
	</head>
	<body>
		<div id="app">
			<img src="../images/logo.jpg" width="100%"/>
			<mt-field label="用户名" placeholder="请输入用户名/手机号" 
				v-model="phone" :attr="{maxlength:11}"></mt-field>
			<div class="forpw">
				<mt-field label="验证码" placeholder="请输入验证码" 
					v-model="code" :attr="{maxlength:6}" class="codeForget"></mt-field>
				<button id="getCodes" @click="getMa" class="getCode" 
					style="font-size: 14px;border:none;background: none;top:16px">点击获取验证码</button>
			</div>
			<br />
			<mt-button type="primary" size="large" @click="login">登 录</mt-button>
			
		</div>
	</body>
	<script type="text/javascript" src="../js/rem.js" ></script>
	<script type="text/javascript" src="../js/vue.js" ></script>
	<script type="text/javascript" src="../js/mint-ui.js" ></script>
	<script type="text/javascript" src="../js/axios.min.js" ></script>
	<script>
		var openId=location.search.substring(8);
		localStorage.setItem("openId",openId);//缓存openId
		
		let countdown=90;
		function setTime(val) {  
		    if (countdown == 0) {  
		        val.removeAttribute("disabled");  
		        val.innerHTML="获取验证码";  
		        countdown = 90;  
		        return false;  
		    } else {  
		        val.setAttribute("disabled", true);  
		        val.innerHTML="重新发送(" + countdown + "s)";  
		        countdown--;  
		    }  
		    setTimeout(function() {  
		        setTime(val);  
		    },1000);  
		} 
		
		
		new Vue({
			el:"#app",
			data:{
				phone:"",
				code:"",
				
			},
			created(){
				
			},
			methods:{
				//获取验证码
				getMa:function(){
					let codes=document.getElementById("getCodes");
					let phoneReg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
					if(this.phone == "" || !phoneReg.test(this.phone)){
						this.$toast("请输入正确的手机号码格式");return;
					}else{
						setTime(codes);
						axios.post("http://106.13.55.49/api/jdUser/phoneCode",{
							phone:this.phone,
							type:"reset"
						}).then(data => {
							console.log(data);
						});
					}
					
				},
				//登录
				login:function(){
					axios.post('http://106.13.55.49/api/jdUser/login',{
						"phone":this.phone,
						"code":this.code,
						"openId":openId
					}).then(data => {
							console.log(data);
							if(data.data.status == 200){
								location.href="vip.html?openId="+openId;
							}else{
								this.$toast(data.data.message);return;
							}
					})
				},
				
			}
			
		})
	</script>
</html>
